<template>
	<view class="doclist">
		<!-- 搜索 -->
		<view class="doclist_search flex-row-center font13">
			<view class="search_box flex-row-start">
				<image src="@/static/search_b.png"></image>
				<input class="input_search" :value="sech" placeholder="搜索医生" maxlength="30" @confirm="Onsearch"
					placeholder-class="placeholderClass" />
			</view>
		</view>
		<!-- 筛选 -->
		<view class="doclist_choice flex-row-start">
			<view class="doc_list flex-row-start" :class="item.code=='room'?'width_290':'width_200'"
				v-for="(item,index) in headList" :key="index" @click="OnPopup(item)">
				<view class="font14 ellipsis docL_view" :class="item.show?'font-6ccbb6':'font-323232'">{{item.title}}
				</view>
				<image class="docL_image" v-if="item.show" src="@/static/home/upward.png"></image>
				<image class="docL_image" v-else src="@/static/home/downward.png"></image>
				<!-- 全部科室弹窗 -->
				<view class="dep_overlay" :style="{height:item.show&&item.code=='room'?'380rpx':'0rpx'}">
					<view class="medicine_list">
						<view class="medicine_left">
							<view v-for="(item,index) in leftList" :key="index"
								:class="item.show?'background_ffffff':'background_f1f2f5'"
								@click.stop="Onclickleft(item)">
								<view :class="item.show?'font-323232':'font-9c9c9d'" class="font14 ellipsis">
									{{item.name}}
								</view>
							</view>
						</view>
						<view class="medicine_right">
							<view v-for="(item,index) in rightList" :key="index" class="medicine_rightR"
								@click.stop="OnclickRight(item)">
								<view class="ellipsis font14" :class="item.show?'font-6ccbb6':''">{{item.name}}</view>
								<image src="@/static/my/morea.png"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 医生称号弹窗 -->
				<view class="dec_overlay" :style="{height:item.show&&item.code=='title'?'380rpx':'0rpx'}">
					<view @click.stop="Ontitle(item)" :class="item.show?'font-6ccbb6':'font-323232'" class="font14"
						v-for="(item,index) in academic" :key="index">{{item.name}}</view>
				</view>
				<!-- 问诊方式弹窗 -->
				<view class="dec_overlay" :style="{height:item.show&&item.code=='mode'?'380rpx':'0rpx'}">
					<view @click.stop="Onmode(item)" :class="item.show?'font-6ccbb6':'font-323232'" class="font14"
						v-for="(item,index) in decList" :key="index">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 数据 -->
		<view class="doclist_data">
			<view class="docdata" v-for="(item,index) in doctorList" :key="index" @click="Oninquiry(item)" v-if="doctorList.length > 0">
				<image mode="aspectFill" class="docdata_image" :src="item.img"></image>
				<view class="docdata_bos">
					<view class="docdata_name docdata_box">
						<view class="font15 font-323232 font-b">{{item.name}}</view>
						<text class="font14 font-989898">{{item.academic_title_name.name}}</text>
					</view>
					<view class="font14 font-989898 docdata_box">{{item.room_name}}</view>
					<view class="docdata_stars docdata_box">
						<image src="@/static/my/stars.png"></image>
						<text class="font14">{{item.score}}</text>
						<view class="font14 font-989898">{{item.consultation_count}}次图文接诊/{{item.consultation_viedo_count}}次视频接诊</view>
					</view>
					<view class="docdata_money docdata_box">
						<view class="font14 font-323232" v-if="item.consultation_status==1">图文
							<text>￥{{item.consultation_money}}</text>
						</view>
						<view class="docdata_fg">|</view>
						<view class="font14 font-323232" v-if="item.consultation_viedo_status==1">视频
							<text>￥{{item.consultation_viedo_money}}</text></view>
					</view>
				</view>
			</view>
			<view class="nodata" v-if="doctorList.length == 0">暂无科室医生</view>
		</view>
		<!-- 碳灰 -->
		<view class="overlay" v-if="overlay_if" @click="Onoverlay"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				doctorList:[],//数据
				overlay_if: false, //弹出
				headList: [{
						title: '全部科室',
						code: 'room',
						show: false
					},
					{
						title: '全部医生',
						code: 'title',
						show: false
					},
					{
						title: '问诊方式',
						code: 'mode',
						show: false
					},
				],
				leftID: null, //科室ID大
				leftList: [], //左边数据
				rightID: null, //科室ID小
				rightList: [], //右边数据
				academic: [], //医生称号列表
				academicID: '', //医生称号ID
				//门诊方式
				decList: [{
						name: '全部',
						show: true,
						id: 1
					},
					{
						name: '图文咨询',
						show: false,
						id: 2
					},
					{
						name: '视频咨询',
						show: false,
						id: 3
					},
				],
				modeID: 1, //门诊ID
			}
		},
		onLoad: function(options) {
			this.leftID = options.code
			this.rightID = options.id
			this.Onleft()
			this.OnRight()
			this.Onacademic()
			this.Ondoctor()
		},
		methods: {
			//医生列表
			Ondoctor(){
				let data = {}
				data.room_id = this.rightID
				if(this.academicID != ''){
					data.academic_title_id = this.academicID
				}
				if(this.modeID == 2){
					data.consultation_status = 1
				}
				if(this.modeID == 3){
					data.consultation_viedo_status = 1
				}
				this.$Http({
					url: 'doctor',
					data: data,
					token: false
				}).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							item.img = this.$store.state.http_img + item.img
						})
						this.doctorList = res.data
					}
				});
			},
			//获取列表左边的
			Onleft() {
				this.$Http({
					url: 'roomType',
					data: {},
					token: false
				}).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							item.show = false
							if (this.leftID == item.id) {
								item.show = true
							}
						})
						this.leftList = res.data
					}
				});
			},
			//点击左边
			Onclickleft(e) {
				this.leftID = e.id
				this.leftList.forEach(item => {
					item.show = false
					if (e.id == item.id) {
						item.show = true
						this.OnRight()
					}
				})
			},
			//获取列表右边的
			OnRight() {
				this.$Http({
					url: 'room',
					data: {
						room_type_id: this.leftID
					},
					token: false
				}).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							item.show = false
							if (this.rightID == item.id) {
								item.show = true
								this.headList[0].title = item.name
							}
						})
						this.rightList = res.data
					}
				});
			},
			//点击右边的
			OnclickRight(e) {
				this.rightID = e.id
				this.rightList.forEach(item => {
					item.show = false
					if (e.id == item.id) {
						item.show = true
						this.headList[0].title = item.name
						this.headList[0].show = false
						this.overlay_if = false
						this.Ondoctor()
					}
				})
			},
			//医生称号列表
			Onacademic() {
				this.$Http({
					url: 'academicTitle',
					data: {},
					token: false
				}).then(res => {
					if (res.code == 1) {
						this.academic = res.data
						let obj = {
							id: '',
							name: '全部医生',
							show: true
						}
						this.academic.unshift(obj)
					}
				});
			},
			//点击称号
			Ontitle(e) {
				this.academicID = e.id
				this.academic.forEach(item => {
					item.show = false
					if (e.id == item.id) {
						item.show = true
						this.headList[1].title = item.name
						this.headList[1].show = false
						this.overlay_if = false
						this.Ondoctor()
					}
				})
			},
			//点击方式
			Onmode(e) {
				this.modeID = e.id
				this.decList.forEach(item => {
					item.show = false
					if (e.id == item.id) {
						item.show = true
						this.headList[2].title = item.name
						this.headList[2].show = false
						this.overlay_if = false
						this.Ondoctor()
					}
				})
			},
			//弹窗
			OnPopup(e) {
				//科室弹窗
				if (e.code == 'room') {
					this.headList[0].show = !this.headList[0].show
					this.headList[1].show = false
					this.headList[2].show = false
				}
				//医生称号弹窗
				if (e.code == 'title') {
					this.headList[1].show = !this.headList[1].show
					this.headList[0].show = false
					this.headList[2].show = false
				}
				//方式弹窗
				if (e.code == 'mode') {
					this.headList[2].show = !this.headList[2].show
					this.headList[0].show = false
					this.headList[1].show = false
				}
				this.headList.forEach(item => {
					if (item.show) {
						this.overlay_if = true
					}
				})
			},
			//关闭
			Onoverlay() {
				this.headList.forEach(item => {
					item.show = false
				})
				this.overlay_if = false
			},
			//详情页面
			Oninquiry(res) {
				uni.navigateTo({
					url: '/pagesA/ask/inquiry?id=' + res.id,
				})
			},
			//搜索
			Onsearch(e) {
				uni.navigateTo({
					url: '/pagesA/ask/sechlist?sech=' + e.detail.value
				});
			},
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
